<template>
  <ScalablePage>
    <div class="big-screen aqgl flex-between" style="width: 480px; overflow: hidden">
      <!-- B池刮泥机 -->
      <!-- 右部 -->
      <div class="rigtContainer">
        <img src="@/assets/dxq/cdc/bg.png" alt="" class="heaimg" />
        <img src="@/assets/dxq/zssj.png" alt="" class="zssj-img" />
        <div class="right-content-icon">
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">设备编码</span>
              </p>
              <p class="p2">{{ shuiwu.equipment_code===""?"-":shuiwu.equipment_code }}</p>

            </div>
          </div>
          <!-- 第二个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">型号规格</span>
              </p>
              <p class="p2">{{ shuiwu.product_model===""?"-":shuiwu.product_model }}</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">设备品牌</span>
              </p>
              <p class="p2">{{ shuiwu.equipment_brand===""?"-":shuiwu.equipment_brand }}</p>

            </div>
          </div>
          <!-- 第四个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">设备状态</span>
              </p>
              <p class="p2">{{ shuiwu.equip_status===""?"-":shuiwu.equip_status }}</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">资产状态</span>
              </p>
              <p class="p2">{{ shuiwu.asset_status===""?"-":shuiwu.asset_status }}</p>

            </div>
          </div>
          <!-- 第六个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">上次故障时间</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">维护倒计时</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <!-- 第八个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">运行时长</span>
              </p>
              <p class="p2">{{ shuiwu.runtimesum===""?"-":shuiwu.runtimesum }}小时</p>

            </div>
          </div>
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">安装日期</span>
              </p>
              <p class="p2">-</p>
            </div>
          </div>
          <!-- 第十个 -->
          <div class="item">
            <img src="@/assets/dxq/rigtb.png" alt="Water Droplet" />
            <div class="text">
              <p class="p1">
                <span class="p1-sp1">运行状态</span>
              </p>
              <p class="p2"> {{ status==0? '-' : status }}  </p>

            </div>
          </div>
         
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件自适应

import { onMounted, ref, toRefs, reactive } from "vue";
import { prodApi } from "@/utils/shuiwu/api";

import {getCurrentDateFormatted} from "@/utils/date"
const equipment_name="B池刮泥机"

const state = reactive({
    status: 0,
    shuiwu:{
     
     equipment_brand:"", // 设备品牌
     asset_status:"",   // 资产状态
     product_model:"", // 规格型号
     equipment_code:"", // 设备编码
     runtimesum: "", // 运行时长==单位小时
     equip_status:"" // 设备状态
   }
});

let { status,shuiwu } = toRefs(state);

onMounted(() => {
  getShuiKu(643);
  getEquipmentInfo()

});

function getShuiKu(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;

    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4943) {
        state.status = arr[i].value;
      }
     
    }
  });
}

function getEquipmentInfo() {
let reg={queryDay:getCurrentDateFormatted()}
fetch(`http://192.168.254.34:8090/getRealtimeData/selectEquipmentInfoList?${new URLSearchParams(reg).toString()}`)
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json()); 
      }
    })
    .then((res) => {
      // state.bengzu.gongkuang=res.data[0].IndexVal
      if(res.data && res.data.length){
        for(let i=0; i<res.data.length; i++){
          if(res.data[i].equipment_name.includes(equipment_name)){
            state.shuiwu.asset_status=res.data[i].asset_status;
            state.shuiwu.equipment_brand=res.data[i].equipment_brand;
            state.shuiwu.equipment_code=res.data[i].equipment_code;
            state.shuiwu.product_model=res.data[i].product_model;
            state.shuiwu.equip_status=res.data[i].equip_status;
            state.shuiwu.runtimesum=res.data[i].runtimesum;
          }
        }
      }
    });
}




</script>
<style scoped lang="less">
// 样式引入
@import url("../../styles/aqgl.less");
// 右边
.rigtContainer {
  top: 0;
  right: 0;
  width: 695px;
  height: 1077px;
}
.heaimg {
  // height: 54px;
  width: 100%;
}
.image-container {
  position: relative;
  width: 535.67px;
  height: 54px;
  img {
    width: 100%;
    height: 100%;
    position: absolute; /* 绝对定位 */
    top: 0;
    left: 0;
  }
  p {
    position: absolute;
    display: inline-block;
    top: 2px;
    left: 41px;
    font-family: OPPOSans, OPPOSans;
    font-weight: normal;
    font-size: 30px;
    color: #ffffff;
    line-height: 40px;
    text-align: left;
    font-style: normal;
  }
}
.zssj-img {
  margin-top: 3px;
  // width: 205px;
  //   height: 28.82px;
  // height: auto;
  // max-height: 40px;
}
.right-content-icon {
  max-width: 480px;
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 从行的开始位置对齐 */
  align-items: flex-start;
  // 选择奇数的.item元素
  .right-content-icon .item:nth-child(odd) {
    margin-left: 0px;
  }
  // 选择偶数的.item元素
  .right-content-icon .item:nth-child(even) {
    margin-left: 10px;
  }
  .item {
    display: flex;
    margin-bottom: 33px; /* 每个.item的底部外边距 */
    width: 50%; /* 每个.item占据50%的宽度，从而每行两个 */
    height: 64px;
    .text {
      display: flex;
      flex-direction: column;
      margin-left: 21px;
      .p1 {
        display: flex;
        .p1-sp1 {
          font-family: D-DIN, D-DIN;
          font-weight: bold;
          font-size: 19px;
          color: #ffffff;
          line-height: 29px;
          text-align: left;
          font-style: normal;
          margin-right: 1px;
        }
      }
      .p2 {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 17px;
        color: #ffffff;
        line-height: 29px;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
.right-content-icon img {
  width: 76px;
  height: 66px;
}
</style>
